<template>
  <view class="signal-container" :style="containerStyle">
    <view class="signal" :style="sizeStyle" v-if="signalStrength > 0">
      <view
        style="
          width: 100%;
          height: 100%;
          padding: 2rpx;
          background-color: #fff;
          border-radius: 50%;
        "
      >
        <view
          class="signal-value signal-1"
          :class="[signalStrength >= 75 ? 'active' : '']"
          :style="sizeStyle1"
        >
          <view
            class="signal-value signal-2"
            :class="[
              signalStrength >= 50 && signalStrength < 75 ? 'active' : '',
            ]"
            :style="sizeStyle2"
          >
            <view
              class="signal-value signal-3"
              :class="[
                signalStrength >= 25 && signalStrength < 50 ? 'active' : '',
              ]"
              :style="sizeStyle3"
            >
              <view
                class="signal-value signal-4"
                :class="[
                  signalStrength > 0 && signalStrength < 25 ? 'active' : '',
                ]"
                :style="sizeStyle4"
              ></view>
            </view>
          </view>
        </view>
      </view>
      <view class="signal-mask">
        <view class="mask1"></view>
        <view class="mask-left"></view>
        <view class="mask-right"></view>
      </view>
    </view>

    <view v-else>
      <u-icon name="wifi-off" :size="sizeVal + 'rpx'" />
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  /**
   * 组件的属性列表
   */
  props: {
    size: {
      type: String, // large / default /small
      default: "default",
    },
    signalStrength: {
      type: Number,
    }, // 信号值 0~100, 信号等级：4个 (0~24, 25~49, 50~74, 75~100)
  },
  /**
   * 组件的初始数据
   */
  data() {
    return {
      containerStyle: "",
      sizeStyle: "",
      sizeStyle1: "",
      sizeStyle2: "",
      sizeStyle3: "",
      sizeStyle4: "",
      sizeVal: "",
    };
  },
  created() {
    this.initStyle();
  },
  methods: {
    initStyle() {
      let sizeVal = 0; // 组件尺寸(宽,高)
      let b = 0; // 信号值厚度
      let w = 0; // 信号值之间间隔距离
      let cw = 0; // 容器宽度
      let ch = 0; // 容器高度
      if (this.size === "large") {
        sizeVal = 70;
        b = 4;
        w = 5;
        cw = 52;
        ch = 40;
      }
      if (this.size === "default") {
        sizeVal = 50;
        b = 3;
        w = 4;
        cw = 40;
        ch = 30;
      }
      if (this.size === "small") {
        sizeVal = 48;
        b = 3;
        w = 4;
        cw = 36;
        ch = 28;
      }

      if (this.signalStrength > 0) {
        let strStyle = `width: ${cw}rpx; height: ${ch}rpx; overflow: hidden;`; // border: solid 1px #ff0000;
        let str = `width:${sizeVal + 4}rpx; height:${sizeVal + 4}rpx;`;
        let str1 = `padding:${w}rpx;width:${sizeVal}rpx; height:${sizeVal}rpx;`;
        let str2 = `padding:${w}rpx; border:solid ${b}rpx #fff;`;
        let str3 = `padding:${w}rpx; border:solid ${b}rpx #fff;`;
        let str4 = `padding:${w}rpx; border:solid ${b}rpx #fff;`;
        this.containerStyle = strStyle;
        this.sizeStyle = str;
        this.sizeStyle1 = str1;
        this.sizeStyle2 = str2;
        this.sizeStyle3 = str3;
        this.sizeStyle4 = str4;
      }
      this.sizeVal = cw;
    },
  },
};
</script>

<style scoped lang="scss">
.signal-container {
  .signal {
    position: relative;
    top: 0;
    left: -20%;
    .signal-value {
      width: 100%;
      height: 100%;
      background: #bbb;
      border-radius: 50%;
      box-sizing: border-box;
    }

    // 有信号
    .active {
      background: #000;
      .signal-value {
        background: #000;
      }
    }

    .signal-mask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      border-radius: 50%;
      overflow: hidden;
      &view {
      }
      .mask1 {
        width: 100%;
        height: 50%;
        position: absolute;
        bottom: 0;
        // background: blue;
        background: #fff;
      }
      .mask-left {
        width: 50%;
        height: 50%;
        position: absolute;
        top: 0;
        left: 0;
        // background: #ff0000;
        background: #fff;
        transform: rotate(45deg);
        transform-origin: -20% 50%;
      }
      .mask-right {
        width: 50%;
        height: 50%;
        position: absolute;
        top: 0;
        right: 0;
        // background: green;
        background: #fff;
        transform: rotate(135deg);
        transform-origin: 50% 80%;
      }
    }
  }
}
</style>
